<template>
    <div>
        <Card class="search" shadow>
            <Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="getTableData"></RefreshButton>
            </div>

            <Table :height="400" size="small" :columns="columns" :data="tableData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="success" size="small" @click="executeTask(row)" style="margin-right: 5px">办理</Button>
                    <Button type="primary" size="small" @click="records(row)" style="margin-right: 5px">查看进度</Button>
                </template>
            </Table>

            <Pagination
                    ref="pagination"
                    size="small"
                    :sizer="true"
                    :page.sync="listQuery.pageNumber"
                    :rows.sync="listQuery.pageSize"
                    :total="total"
                    @on-change="getTableData"/>
        </Card>
    </div>
</template>

<script>
    import {findBacklogPage} from '@/api/workflow';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "Backlog",
        components: {
            Pagination,RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '任务名称',
                        key: 'name'
                    },
                    {
                        title: '业务名称',
                        key: 'businessName'
                    },
                    {
                        title: '所属流程',
                        key: 'processDefinitionName'
                    },
                    {
                        title: '委托代办人',
                        key: 'assigneeName'
                    },
                    {
                        title: '流程发起人',
                        key: 'startUserName'
                    },
                    {
                        title: '状态',
                        key: 'isSuspendedCN'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 150
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 180,
                        align: 'center'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
            }
        },
        created(){
            this.getTableData();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findBacklogPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            //查看进度
            records(row) {
                this.$router.push({
                    path: "/records", query: {
                        processInstanceId: row.processInstanceId,
                        executionId: row.executionId,
                        taskId: row.id,
                    }
                })
            },
            //办理
            executeTask(row){
                this.$router.push({
                    path: "/execute", query: {
                        processInstanceId: row.processInstanceId,
                        executionId: row.executionId,
                        taskId: row.id,
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
